<template>
    <div>
        <div class="header">
            <p>
                音乐排行榜
            </p>
            <audio ref="audioRef" :src="url"  autoplay></audio>
            <div>
                <van-tabs v-model="active" sticky>
                    <van-tab title="音乐">
                        <div class="van-cell-group">
                            <van-cell class="music-moudle" v-for="(item,index) in musicList" :key="index" >
                                <div class="picture">
                                    <img v-lazy="item.al.picUrl" alt="" width="100%" height="100%">
                                </div>
                                <div class="music-button">
                                    <div class="singer-information">
                                        <span class="van-ellipsis">{{item.al.name}}</span><br>
                                        <span class="van-ellipsis">{{item.ar[0].name}}</span>
                                    </div>
                                    <div class="fonts-icon">
                                        <van-icon class="play-button" name="play-circle-o" size= "30" @click="play(index)" v-show="playMusicList != index"/>
                                        <van-icon class="play-button" name="pause-circle-o" size= "30" @click="pause" v-show="playMusicList == index" />
                                    </div>
                                </div>
                            </van-cell>
                        </div>
                    </van-tab>
                    <van-tab title="MV视频">
                        <div class="van-cell-group">
                            <van-cell class="music-video"  v-for="(item,index) in video" :key="index" >
                                <router-link :to="{name:'play-mv',params:{id:item.id}}" tag="div" class="music-mv">
                                    <img :src="item.picUrl" alt="" width="100%" height="100%">
                                    <div>{{item.name}}</div>
                                    <div>{{item.artistName}}</div>
                                </router-link>
                            </van-cell>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
        <!-- 底部 -->
        <div class="bottom-nav">
            <!-- 底部导航栏 -->
            <ul>
                <li>
                    <router-link to = "/index">
                        <div class="icon">
                            <van-icon name="wap-home-o" size="20"/>
                        </div>
                        <div class="text">
                            首页
                        </div>
                    </router-link>
                </li>
                <li>
                    <router-link to = "/HotList">
                        <div class="icon">
                            <van-icon name="fire-o" size="20"/>
                        </div>
                        <div class="text">
                            热榜
                        </div>
                    </router-link>
                </li>
                <li>
                    <router-link to>
                        <div class="icon">
                            <van-icon name="service-o" size="20"/>
                        </div>
                        <div class="text">
                            音乐
                        </div>
                    </router-link>
                </li>
                <li>
                    <router-link to="/Login">
                        <div class="icon">
                            <van-icon name="user-o" size="20"/>
                        </div>
                        <div class="text">
                            我的
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import {wudi} from '../api/Music-api'
import {play} from '../api/Music-api'
import {video} from '../api/Music-api'


export default {
    created() {
        wudi(1).then(res=>{
            // console.log(res);
            // // eslint-disable-next-line no-debugger
            // debugger;
            this.musicList = res.playlist.tracks;
        }),
        video().then(res=>{
            this.video = res.result;
        })
    },
    data() {
        return {
            active:2,
            ifchange:true,
            musicList:[],
            video:[],
            url:'',
            playMusicList: -1
        }
    },
    methods: {
        play(index){
            this.playMusicList = index;
            const playMusic = this.musicList [index].id;
            play(playMusic).then(res=>{
                console.log(res);
                // // eslint-disable-next-line no-debugger
                // debugger;
                this.url = res.data[0].url;
            })
        },
        pause() {
            this.playMusicList = -1;
            this.$refs.audioRef.pause();
        }
    }
    
}
</script>

<style lang="less" scoped>
    * {
        margin: 0;
        padding: 0;
    }
    .header {
        width: 100%;
        height: 40px;
        background-color: #1296ff;
    }
    .header p {
        color: white;
        line-height: 40px;
        text-align: center;
    }
    .music-moudle {
        width: 100%;
        height: 80px;
    }
    .picture {
        width: 30%;
        height:100%;
        float: left;
        background-color: white;
    }
    .music-button {
        width: 70%;
        height: 100%;
        float: right;
    }
    .singer-information {
        width: 50%;
        height: 100%;
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .singer-information span {
        margin: 20px 0 0 10px;
    }
    .fonts-icon {
        width: 50%;
        height: 100%;
        float: right;
    }
    .play-button {
        line-height: 80px;
        margin-left: 50px;
    }
    .music-video {
        width: 100%;
        height: 230px;
    }
    .music-mv {
        width: 96%;
        height: 170px;
        margin: 10px 2% 0 2%;
        div {
            width: 96%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    



//底部导航栏
    .bottom-nav {
        width: 100%;
        height: 50px;
        background-color: #f7f4f4;
        position: fixed;
        left: 0;
        bottom: 0;
        ul {
            height: 100%;
            display: flex;
            list-style: none;
            li {
                width: 25%;
                height: 100%;
                text-align: center;
                .icon {
                    margin-top: 3px;
                }
            }
        }
    }
    /deep/ a:-webkit-any-link {
        color: black;
    }
    .v-enter,
    .v-leave-to {
        opacity: 0;
    }

    .v-enter-to,
    .v-leave {
        opacity: 1;
    }

    .v-enter-active,
    .v-leave-active {
        transition: all 0.5s ease;
    }
</style>